<template>
  <div class="login-wrap">
    <div class="login-box">
      <div class="outside">
        <div
          class="triangle-topright"
          :class="loginByPwdClass"
          @click="handleSwitchLoginMethod"
        ></div>
      </div>
      <div class="login-left">
        <img
          class="login-img"
          src="/images/account.jpg"
        />
      </div>
      <div class="login-right">
        <div class="title">
          登录账号
        </div>
        <div
          class="form-body"
          v-if="loginByPwd"
        >
          <el-tabs
            stretch
            v-model="activeName"
          >
            <el-tab-pane
              label="密码登录"
              name="first"
            >
              <login-form></login-form>
            </el-tab-pane>
            <el-tab-pane
              label="验证码登录"
              name="second"
            >
              <sms-login-form />
            </el-tab-pane>
            <el-tab-pane
              label="参加会议"
              name="third"
            >
              <meeting-form />
            </el-tab-pane>
          </el-tabs>
        </div>
        <div
          class="form-body"
          v-else
        >
          <div class="login-title">
            手机扫码安全登录
          </div>
          <img
            class="login-code"
            src="/images/qrcode.png"
          />
          <div class="login-tip">打开手机App扫描二维码登录</div>
        </div>
        <div class="foot">
          <p>
            没有账号？请
            <router-link to="/register">
              <span>注册</span>
            </router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginForm from './form/LoginForm'
import SmsLoginForm from './form/SmsLoginForm'
import MeetingForm from './form/MeetingForm'

export default {
  name: 'Login',
  components: {
    LoginForm,
    SmsLoginForm,
    MeetingForm
  },
  data () {
    return {
      activeName: 'first',
      loginByPwd: true
    }
  },
  computed: {
    loginByPwdClass () {
      return this.loginByPwd ? 'qrCode' : 'psWord'
    }
  },
  methods: {
    handleSwitchLoginMethod () {
      this.loginByPwd = !this.loginByPwd
    }
  }
}
</script>

<style lang="scss" scoped>
$qrCodeSize: 100px;

.login-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .login-box {
    margin: auto;
    width: $global_width;
    height: $account_card_height;
    box-shadow: 10px 10px 35px 4px rgba(0, 0, 0, 0.15);
    display: flex;
    position: relative;
    .outside {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      user-select: none;
      .triangle-topright {
        position: relative;
        height: $qrCodeSize;
        width: $qrCodeSize;
        overflow: hidden;
        background: url('/images/login.png') no-repeat;
        background-size: $qrCodeSize * 2;
      }
      .qrCode {
        background-position: -$qrCodeSize - 1 0px;
      }
      .psWord {
        background-position: 0px 0px;
      }
      .triangle-topright::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: $qrCodeSize;
        transform-origin: 0 0%;
        transform: skewX(45deg);
        cursor: pointer;
      }
    }
    .login-left {
      display: flex;
      align-items: center;
      justify-content: center;
      width: $half_global_width;
      height: $account_card_height;
      background-color: #fff;
      .login-img {
        width: $half_global_width;
        height: auto;
      }
    }
    .login-right {
      width: $half_global_width;
      height: $account_card_height;
      padding: 100px 150px;
      box-sizing: border-box;
      position: relative;
      .title {
        text-align: center;
        font-size: 30px;
        margin-bottom: 30px;
      }
      .form-body {
        height: $account_form_height;
        .login-title {
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 30px;
        }
        .login-code {
          margin: auto;
          display: block;
          width: 160px;
          height: 160px;
        }
        .login-tip {
          margin-top: 30px;
          text-align: center;
          color: #666;
        }
      }
      .foot {
        width: 100%;
        text-align: center;
        border-top: 1px solid #ccc;
        p {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
